CSS保健室｜flex

前言

傳統的 float 雖然也可以解決多種排版，但對於現在更加多元的排版方式已經顯得不夠，而 flex 是 CSS3 新的佈局模式，更適合響應式的設計，也更能彈性的完成多種排版，在 Bootstrap 3 轉 Bootstrap 4 時，也捨棄了浮動，改成用 flex 來佈局。

（ 圖片來源 ）

由於 flexible box 使用不同的排版演算法，所以下面屬性不太適合用在彈性容器內：

• multiple column 模組的 col-* 屬性對彈性項目無效。
• clear。
• float。
• vertical-align 對已對齊的彈性項目無效。

flex 中分為 外容器 與 內元件 ，分別都有各自的屬性。

flex 外容器屬性：

• display
• flex-flow （ flex-direction ＆ flex-wrap ）
• justify-content
• align-items

flex 內元件屬性：

• flex （ flex-grow ＆ flex-shrink ＆ flex-basis ）
• order
• align-self

相關網站，能讓你更快速學會 flex 屬性：

1. Flexbox Playground
2. Flexy Boxes
3. Flexbox Properties Demonstration
4. Flexbox Froggy

外容器

display

一開始要宣告為 flex 才能使用，除了 flex 外，還有一個 inline-flex ，作用類似於 inline-block + flex ，意義上都是一個 display:flex 的元素外面包覆 display:inline 的屬性，在後方的元素不會換行。

如果需要支援較舊的瀏覽器需要加上前綴並寫在 display 屬性（ property ），而不是屬性值（ attribute ）：
IE 支持替代的 display: -ms-flexbox 規則， Opera 、 Safari 和 Chrome 支持替代的 display: -webkit-box 規則。

.example {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

flex-flow （ flex-direction ＆ flex-wrap ）

.flex-container {
  flex-flow: <'flex-direction'> || <'flex-wrap'>
}

flex-direction

改變下圖中的軸線方向，可以將軸線做水平反轉、轉為垂直、垂直反轉等。

flex-wrap

超出範圍時是否換行的屬性，分為換行（ wrap ）、不換行（ nowrap ）、換行時反轉（ wrap-reverse ）。

justify-content

接近水平對齊的設定，但嚴格說來是稱為主軸對齊，主軸的設定是上方的 flex-direction ，所以實際是水平或垂直，要依主軸的方向而定。

align-items

接近垂直對齊的設定，但嚴格說來是稱為交錯軸對齊，主軸的設定是上方的 flex-direction ，所以實際是水平或垂直，要依主軸的方向而定。

align-content

align-items 的多行版本，排列方式也有多一些，但注意 stretch 在高度被限制的情況下不會正常伸展。

內元件

flex （ flex-grow ＆ flex-shrink ＆ flex-basis ）

flex 是縮寫，裡面依序包含三個屬性 flex-grow 、 flex-shrink 和 flex-basis ，如果只設定一個則是 flex-grow 。

flex-grow

元件的伸展性，是一個數值，當空間分配還有剩餘時的當前元件的伸展性，預設值為 0 ，如果設置為 0 則不會伸長。

HTML

<div class="flex">
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
</div>

CSS

.container {width: 1000px;}
.flex {
    display: flex;
    background-color: #efefef;
}
.box {
    width: 100px;
    height: 100px;
}
.box1 {
    background-color: #eab7b7;
    flex-grow: 2;
}
.box2 {
    background-color: #99dcb5;
    flex-grow: 1;
}
.box3 {background-color: #99c0dc;}

若設定 container 寬度爲 1000px ，紅色、綠色、藍色方塊皆爲 100px ，剩餘區域爲 700px 。

將紅色盒子設定 flex-grow: 2; 接著將綠色盒子設定 flex-grow: 1; ，表示剩餘空間 700px，分爲 3 份，分配給紅色盒子 2 份及綠色盒子 1 份，效果如下：

若隨著寬度縮放，剩餘空間不同，則被分配到的寬度也會不一樣。

flex-shrink

元件的收縮性，是一個數值，當空間分配還不足時的當前元件的收縮性，預設值為 1 ，如果設置為 1 表示被壓縮的比例相同，設置為 0 則不會縮小。

container 寬度維持 1000px ，每個 box 寬度改爲 400px ，總共 1200px ，超出 container 寬度，但每個盒子因爲 flex-shrink 預設爲 1 的關係，不夠的空間會均分壓縮三個盒子。

.box {
    width: 400px;
    height: 100px;
}
.box1 {
    background-color: #eab7b7;
    flex-shrink: 0;
}
.box2 {
    background-color: #99dcb5;
    flex-shrink: 1;
}
.box3 {
    background-color: #99c0dc;
    flex-shrink: 0;
}

接著試試看綠色盒子 flex-shrink 爲 1 ，其他盒子爲 0 ，則不夠的部分只會壓縮綠色盒子，效果如下：

壓縮盒子的分配並不像多餘空間是以設定的比例直接分配，而是要考慮原來盒子的大小，當盒子大小不同時，能夠承受被壓縮的程度就會不同。

flex-basis

元件的基準值，可使用不同的單位值，預設值為 0 ，沒有設定此屬性的時候，會以直接採用 flex-grow 屬性， flex-basis 也可以設為 auto ，如果為 auto ，就表示子元素以自己的基本大小為單位。

.box {
    width: 200px;
    height: 100px;
}
.box1 {background-color: #eab7b7;}
.box2 {background-color: #99dcb5;}
.box3 {
    background-color: #99c0dc;
    flex-basis: 400px;
}

container 寬度維持 1000px ，每個 box 寬度改爲 200px 。將藍色盒子加上 flex-basis: 400px; ，則 flex-basis 會覆蓋 width ，效果如下：

align-self

可以調整內元件交錯軸的對齊設定( 主軸線則不能另外做設定 )，且可以個別設定單一元件的值。

align-self 的設定與 align-items 相同，但目的不同， align-self 的作用在於覆寫已經套用 align-items 的屬性。

order

可以重新定義元件的排列順序，順序會依據數值的大小排列。

HTML

<div class="flex">
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
    <div class="box box4"></div>
    <div class="box box5"></div>
    <div class="box box6"></div>
    <div class="box box7"></div>
</div>

CSS

.flex {
    display: flex;
    background-color: #efefef;
}
.box {
    width: 100px;
    height: 100px;
}
.box1 {background-color: #eab7b7;}
.box2 {background-color: #99dcb5;}
.box3 {background-color: #99c0dc;}
.box4 {background-color: #d6b7e0;}
.box5 {background-color: #dae0b7;}
.box6 {background-color: #d2c1a1;}
.box7 {background-color: #d2a1c0;}

若想把上面改成彩虹色譜的順序，添加 order 就不需要更動 HTML 碼了。

.box1 {
    background-color: #eab7b7;
    order: 1;
}
.box2 {
    background-color: #99dcb5;
    order: 4;
}
.box3 {
    background-color: #99c0dc;
    order: 5;
}
.box4 {
    background-color: #d6b7e0;
    order: 7;
}
.box5 {
    background-color: #dae0b7;
    order: 3;
}
.box6 {
    background-color: #d2c1a1;
    order: 2;
}
.box7 {
    background-color: #d2a1c0;
    order: 6;
}

參考資料

1. CSS彈性盒子用法
2. 圖解：CSS Flex 屬性一點也不難
3. 深入解析 CSS Flexbox
4. CSS flex-direction 属性
5. CSS flex-wrap 属性
6. CSS justify-content 属性
7. justify-content - CSS（层叠样式表） | MDN
8. CSS align-items 属性
9. CSS align-content 属性
10. Day24 Flex 空間分配 flex-grow / flex-shrink / flex-basis